<header class="uc_head">
    <h3>百度地图</h3>
</header>

<div style="padding: 30px 20px">
    <center>
    地址：<input type="text" name="address" id="address"/>
    <button id="search">搜索</button><button id="statics">展示地图</button>
        <div id="map" style="width:400px;height:200px;"></div>
    </center>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nY0iWbBUKYasUyXZZFp6VcCX8HfpIiZq"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#search").click(function(){
        var address = $("#address").val();
//        alert(address);
        $.ajax({
            url:"{url:/ucenter/static_do}",
            data:{address:address},
            type:"post",
            datatype:"json",
            success:function(res){
                var res = JSON.parse(res);
                var lng = res.lng;
                var lat = res.lat;




                var map = new BMap.Map("map");
                var point = new BMap.Point(lng,lat);
                map.centerAndZoom(point,12);
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(address, function(point){
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMap.Marker(point));
                    }else{
                        alert("您选择地址没有解析到结果!");
                    }
                }, address);
            }
        })
    })



    $("#statics").click(function(){
        var address = $("#address").val();
//        alert(address);
        $.ajax({
            url:"{url:/ucenter/static_do}",
            data:{address:address},
            type:"post",
            datatype:"json",
            success:function(res){
//                console.log(res.lng);
                var res = JSON.parse(res);
                var lng = res.lng;
                var lat = res.lat;

                var panorama = new BMap.Panorama('map'); //默认为显示道路指示控件
                panorama.setPosition(new BMap.Point(lng,lat));
                document.getElementById("hideLinksControl").onclick = function(){
                    panorama.setOptions({
                        linksControl: false //隐藏道路指示控件
                    });
                };
                document.getElementById("showLinksControl").onclick = function(){
                    panorama.setOptions({
                        linksControl: true //显示道路指示控件

                    });
                };

            }
        })
    })


</script>